<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css" />
  <link rel="stylesheet" href="demo.css" />
  <link rel="stylesheet" href="iconify.css" />
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
</head>

<body>
  <div class="content font-class">
    <ul class="icon_lists dib-box">
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--radio-button-checked-outline"></span>
        <div class="code-name">.icon--epic--radio-button-checked-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--toggle-off-outline"></span>
        <div class="code-name">.icon--epic--toggle-off-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--switches"></span>
        <div class="code-name">.icon--epic--switches</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--dialogs-outline-rounded"></span>
        <div class="code-name">.icon--epic--dialogs-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--123-rounded"></span>
        <div class="code-name">.icon--epic--123-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--terminal-rounded"></span>
        <div class="code-name">.icon--epic--terminal-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--width-normal-outline"></span>
        <div class="code-name">.icon--epic--width-normal-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--auto-awesome-mosaic-outline"></span>
        <div class="code-name">.icon--epic--auto-awesome-mosaic-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--crop-free-rounded"></span>
        <div class="code-name">.icon--epic--crop-free-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--imagesmode-outline-rounded"></span>
        <div class="code-name">.icon--epic--imagesmode-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--web-stories-outline"></span>
        <div class="code-name">.icon--epic--web-stories-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--zoom-in-map-rounded"></span>
        <div class="code-name">.icon--epic--zoom-in-map-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--zoom-out-map-rounded"></span>
        <div class="code-name">.icon--epic--zoom-out-map-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--window-outline"></span>
        <div class="code-name">.icon--epic--window-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--edit-square-outline-rounded"></span>
        <div class="code-name">.icon--epic--edit-square-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--extension-outline"></span>
        <div class="code-name">.icon--epic--extension-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--event-available-rounded"></span>
        <div class="code-name">.icon--epic--event-available-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--event-note-rounded"></span>
        <div class="code-name">.icon--epic--event-note-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--error-outline-rounded"></span>
        <div class="code-name">.icon--epic--error-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--help-outline-rounded"></span>
        <div class="code-name">.icon--epic--help-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--event-available-outline-rounded"></span>
        <div class="code-name">.icon--epic--event-available-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--history-rounded"></span>
        <div class="code-name">.icon--epic--history-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--calendar-month-outline-rounded"></span>
        <div class="code-name">.icon--epic--calendar-month-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--code-blocks-outline-rounded"></span>
        <div class="code-name">.icon--epic--code-blocks-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--wysiwyg-rounded"></span>
        <div class="code-name">.icon--epic--wysiwyg-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--visibility-off-outline-rounded"></span>
        <div class="code-name">.icon--epic--visibility-off-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--visibility-outline-rounded"></span>
        <div class="code-name">.icon--epic--visibility-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--sdk-outline-rounded"></span>
        <div class="code-name">.icon--epic--sdk-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--calendar-view-month-outline"></span>
        <div class="code-name">.icon--epic--calendar-view-month-outline</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--copy-all-outline-rounded"></span>
        <div class="code-name">.icon--epic--copy-all-outline-rounded</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--insert-text-outline-rounded"></span>
        <div class="code-name">.icon--epic--insert-text-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--account-tree-outline-rounded"></span>
        <div class="code-name">.icon--epic--account-tree-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--delete-outline-rounded"></span>
        <div class="code-name">.icon--epic--delete-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--border-color-outline-rounded"></span>
        <div class="code-name">.icon--epic--border-color-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--lock-outline"></span>
        <div class="code-name">.icon--epic--lock-outline</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--lock-open-outline"></span>
        <div class="code-name">.icon--epic--lock-open-outline</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--list-alt-outline-rounded"></span>
        <div class="code-name">.icon--epic--list-alt-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--fit-screen-rounded"></span>
        <div class="code-name">.icon--epic--fit-screen-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--arrow-back-ios-rounded"></span>
        <div class="code-name">.icon--epic--arrow-back-ios-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--arrow-forward-ios-rounded"></span>
        <div class="code-name">.icon--epic--arrow-forward-ios-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--exit-to-app-rounded"></span>
        <div class="code-name">.icon--epic--exit-to-app-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--terminal-rounded"></span>
        <div class="code-name">.icon--epic--terminal-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--page-info-outline-rounded"></span>
        <div class="code-name">.icon--epic--page-info-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--palette-outline"></span>
        <div class="code-name">.icon--epic--palette-outline</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--sliders"></span>
        <div class="code-name">.icon--epic--sliders</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--full-coverage-outline"></span>
        <div class="code-name">.icon--epic--full-coverage-outline</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--undo"></span>
        <div class="code-name">.icon--epic--undo</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--redo"></span>
        <div class="code-name">.icon--epic--redo</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--computer-outline-rounded"></span>
        <div class="code-name">.icon--epic--computer-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--tablet-android-outline-rounded"></span>
        <div class="code-name">.icon--epic--tablet-android-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--phone-iphone-outline-sharp"></span>
        <div class="code-name">.icon--epic--phone-iphone-outline-sharp</div>
      </li>
      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--search-rounded"></span>
        <div class="code-name">.icon--epic--search-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--preview-outline"></span>
        <div class="code-name">.icon--epic--preview-outline</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--save-outline-rounded"></span>
        <div class="code-name">.icon--epic--save-outline-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--add-rounded"></span>
        <div class="code-name">.icon--epic--add-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--round-add-card"></span>
        <div class="code-name">.icon--epic--round-add-card</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--drag"></span>
        <div class="code-name">.icon--epic--drag</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--select"></span>
        <div class="code-name">.icon--epic--select</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--time-line"></span>
        <div class="code-name">.icon--epic--time-line</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--upload-rounded"></span>
        <div class="code-name">.icon--epic--upload-rounded</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--cloud-upload-outlined"></span>
        <div class="code-name">.icon--epic--cloud-upload-outlined</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--caret-right-outlined"></span>
        <div class="code-name">.icon--epic--caret-right-outlined</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--code"></span>
        <div class="code-name">.icon--epic--code</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--file-input"></span>
        <div class="code-name">.icon--epic--file-input</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--trash"></span>
        <div class="code-name">.icon--epic--trash</div>
      </li>

      <li class="dib">
        <span class="icon iconfont icon--epic icon--epic--eye"></span>
        <div class="code-name">.icon--epic--eye</div>
      </li>
    </ul>
  </div>
  <script>
    $(document).ready(function () {
      $(".tab-container .content:first").show();

      $("#tabs li").click(function (e) {
        var tabContent = $(".tab-container .content");
        var index = $(this).index();

        if ($(this).hasClass("active")) {
          return;
        } else {
          $("#tabs li").removeClass("active");
          $(this).addClass("active");

          tabContent.hide().eq(index).fadeIn();
        }
      });
    });
  </script>
</body>

</html>